<template>
	<view class="register">
		<view class="from">
			<view class="phone">原手机号：{{phone}}</view>
			<view class="input">
				<image src="/static/img/code2.png" />
				<input type="text" v-model="code" placeholder="请输入验证码" maxlength="4"  AUTOCOMPLETE="off"/>
				<!-- <image v-if="imgCodePath" @click="getImgCode()" :src="imgCodePath" class="code"  /> -->
			 <rich-text class="code" @click="getImgCode()" :nodes="strings"></rich-text>
			
			</view>
			<view class="input">
				<image src="/static/img/phone2.png" />
				<input type="number" v-model="input.mobile" placeholder="请输入新手机号" @blur="checkTel" AUTOCOMPLETE="off" maxlength="11"/>
				
			</view>
			<view class="input">
				<image src="/static/img/code1.png" />
				<input type="text" placeholder="请输入手机验证码" maxlength="6" v-model="input.smsCode" AUTOCOMPLETE="off"/>
				<text class="go-code" v-if="time > 0">{{ time }}秒后重新发送</text>
				<text class="go-code" v-else @click="go_code" style="color:#bd3c8c">发送验证码</text>
			</view>
			
			
			<view class="button" @click='registerAccount'>修改</view>
		</view>
	</view>
</template>

<script>
import { uniIcons } from '@dcloudio/uni-ui';
import loginApi from '../../../servers/shop/login.js'
export default {
	components: { uniIcons },
	data() {
		return {
			time: 0,
			is_code: false,
			value: '',
			input:{
				mobile:'',
				// 短信验证码
				smsCode:'',			
			},
	
			// 图像验证码
			code:'',
			// 手机号是否可用
			isCheckOut:false,
			isAgentBind:false,
			imgCodePath:'',
			strings:'',
			utoken: '',
			phone:''
		};
	},
	onLoad(option) {
		this.phone=option.phone;
	},
	mounted(){
		// 获取图形验证码
		this.getImgCode()
	},
	methods: {
		// 获取图形验证码
		getImgCode(){
			loginApi.getImgCode().then(res=>{
				console.log(res)
				if(res.code === 200){
					this.imgCodePath = 'data:image/png;base64,' + res.data.img
					// this.imgCodePath = `url(${this.imgCodePath})`
					this.strings = `<img style='width:100px;height:30px' src='${this.imgCodePath}' />`
					this.utoken = res.data.utoken
				}
			})
		},
		go_code() {
			if(!this.input.mobile){
				uni.showToast({
				    title: "请输入手机号",
					icon:'none',
					position:'bottom'
				})
				return
			}
			
			if (!this.code) {
				uni.showToast({  
				    title: "请输入图形验证码",
					icon:'none',
					position:'bottom'
				})
				return
			}
			if(this.code.length!=4){
				uni.showToast({
				    title: "请输入正确的图形验证码！",
					icon:'none',
					position:'bottom'
				})
				return
			}
			if(this.input.mobile.length!=11&&this.input.mobile||!this.isCheckOut){
				uni.showToast({
				    title: "请输入正确的手机号",
					icon:'none',
					position:'bottom'
				})
				return
			}
			let data = {
				bizCode:1,
				imageCode:this.code,
				mobile:this.input.mobile,
				utoken: this.utoken
			}
			// 发送手机验证码
			loginApi.sendTelMsg(data).then(res=>{
				console.log(res)
				if(res.code === 200&&!res.subCode){
					uni.showToast({
					    title: "短信发送成功",
						icon:'none',
						position:'bottom'
					})
					this.time = 60
					this.settime()
				}else{
					uni.showToast({
					    title: res.msg,
						position:'bottom'
					})
					return;
				}
			})
		},
		// 检查手机号是否可用
		checkTel(){
			if(!this.input.mobile){
				return
			}
			if(this.input.mobile.length==11){
				let data = {
					mobile:this.input.mobile
				}
				loginApi.checkTel(data).then(res=>{
					if(res.code === 200&& !res.subCode){
						this.isCheckOut = true
						this.isRegister = false
					}else{
						uni.showToast({
							icon:'none',
						    title: res.msg,
						    duration: 2000
						});
						this.isCheckOut = false
						this.isRegister = true
					}
				})
			}
			
			
			
		},
		
		// 注册账户
		registerAccount(){
			if(!this.input.mobile){
				uni.showToast({
				    title: "请输入手机号！",
					icon:'none',
					position:'bottom'
				})
				return
			}
		
			if (!this.code) {
				uni.showToast({  
				    title: "请输入图形验证码！",
					icon:'none',
					position:'bottom'
				})
				return
			}
			if(this.code.length!=4){
				uni.showToast({
				    title: "请输入正确的图形验证码！",
					icon:'none',
					position:'bottom'
				})
				return
			}
			if(!this.input.smsCode){
				uni.showToast({
				    title: "请输入手机验证码！",
					icon:'none',
					position:'bottom'
				})
				return
			}
			if(this.input.smsCode.length!=6){
				uni.showToast({
				    title: "请输入正确的手机验证码！",
					icon:'none',
					position:'bottom'
				})
				return
			}
			let data = {
				mobile:this.input.mobile,				
				smsCode:this.input.smsCode
			}
			loginApi.setMobile(data).then(res=>{
				console.log(res)
				if(res.code === 200 && !res.subCode){
					uni.showToast({
					    title: "修改成功！"						
					})
					
					setTimeout(function() {
						uni.redirectTo({
							url: './information'
						});
					}, 2000);
				}else{
					this.isCheckOut = false;
					uni.showToast({
					    title: res.msg,
						position:'bottom'
					})
					return;
				}
			})
		},
		
		settime(){
			var _this = this
			var time = this.time
			if(time>0){
				setTimeout(function(){
					_this.time--
					_this.settime()
				},1000)
			}
		}
	}
};
</script>

<style lang="less" scoped>
	.index{
		width: 200rpx;
		height: 120rpx;
	}
	.phone{
		padding: 20rpx 0 0 60rpx ;
	}
page {
	background: #ffffff;
}
.register {
	background: #fff;
	height: 100%;
	
	.from {
		.input {
			margin: 30rpx 44rpx;
			border: 1px solid #e1e1e1; /*no*/
			border-radius: 100rpx;
			line-height: 100rpx;
			position: relative;
			image {
				position: absolute;
				width: 40rpx;
				height: 42rpx;
				left: 44rpx;
				top: 25rpx;
			}
			input {
				width: 100%;
				height: 86rpx;
				line-height: 100rpx;
				padding: 0 142rpx;
				box-sizing: border-box;
				font-size: 24rpx;
			}
			
			.code {
				position: absolute;
				left: auto;
				right: 20rpx;
				top: 50%;
				margin-top: -15px;
				height: 30px;
			}
			.go-code {
				position: absolute;
				top: -10rpx;
				right: 0rpx;
				width: 250rpx;
				font-size: 28rpx;
				text-align: center;
				color: #8a8a8a;
			}
		}
		.button {
			line-height: 90rpx;
			background: linear-gradient(80deg, #d2158a, #fc6395);
			text-align: center;
			color: #fff;
			border-radius: 45rpx;
			font-size: 32rpx;
			margin: 67rpx 34rpx;
			box-shadow: 3rpx 0 20rpx rgba(206, 205, 204, 0.35);
		}
	}
	
}
</style>
